<template>
	<view>
		<view class="box">
			<view class="type-text">
				<view><text class="red">*</text>药品名称</view>
				<input type="text" placeholder="请输入药品名称" v-model="drug_name" placeholder-class="mo" :disabled="dis" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>数量</view>
				<input type="number" placeholder="请输入数量" v-model="drug_num" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="user_name" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>电话</view>
				<input type="number" placeholder="请输入电话" v-model="phone" placeholder-class="mo" maxlength="11" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>地域</view>
				<input type="text" placeholder="请输入所在地域" v-model="area" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view>生产厂商</view>
				<input type="text" placeholder="请输入生产厂商" v-model="factory" placeholder-class="mo" :disabled="dis" />
			</view>
			<view class="type-text">
				<view>商品编码</view>
				<input type="text" placeholder="请输入商品编码" v-model="number" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view>规格</view>
				<input type="text" placeholder="请输入规格" v-model="specs" placeholder-class="mo" />
			</view>
			<view class="type-radio">
				<view class="title">是否接受代替厂家及规格</view>
				<view class="radio-con">
					<view class="radio-box" @click="radioTab(0)">
						<view :class="radioNum==0?'wlIcon-31xuanzhong icon-select':'wlIcon-31xuanzhong icon-mo'"></view>
						<view class="con-text">是</view>
					</view>
					<view class="radio-box" @click="radioTab(1)">
						<view :class="radioNum==1?'wlIcon-31xuanzhong icon-select':'wlIcon-31xuanzhong icon-mo'"></view>
						<view class="con-text">否</view>
					</view>
				</view>
			</view>
			<view class="type-textarea">
				<view class="title">备注</view>
				<view class="textarea-con">
					<textarea placeholder="请输入备注" v-model="remarks" placeholder-class="mo"></textarea>
				</view>
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>上传药盒(说明书/包装)</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="package_image.length<1">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in package_image">
						<image :src="$wanlshop.oss(item)" mode="aspectFill"></image>
						
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>处方单</view>
				<view class="img-con">
					<view class="upload" @click="uploadImgs" v-if="prescription_image.length < 1">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in prescription_image">
						<image :src="$wanlshop.oss(item)" mode="aspectFill"></image>
						<view class="close" @click="closeImgs(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null"></view>
		<view class="foot-box">
			<view class="record" @click="purchaseList">预定记录</view>
			<view class="apply" @click="loadData()">提交申请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['张三', '李四', '王五'],
				index: -1,
				radioNum: 0,
				imgs: [],
				checkbox: [{
					name: '篮球',
					state: false
				}, {
					name: '足球',
					state: false
				}, {
					name: '羽毛球',
					state: false
				}, {
					name: '排球',
					state: false
				}, {
					name: '乒乓球',
					state: false
				}],
				video: '',
				date: '',
				startTime: '',
				endTime: '',
				address: '',

				drug_name: '',
				drug_num: '',
				user_name: '',
				phone: '',
				area: '',
				factory: '',
				number: '',
				specs: '',
				remarks: '',
				package_image: [],
				prescription_image: [],
				type:1,
				xinte_goods_id:0,
				xinte_goods:{},
				dis:false
			};
		},
		onLoad(option) {
			
			if(option.xinte_goods){
				this.xinte_goods = JSON.parse(decodeURIComponent(option.xinte_goods));
				console.log(this.xinte_goods);
				this.xinte_goods_id = this.xinte_goods.xinte_goods_id
				this.drug_name = this.xinte_goods.goods_name
				this.factory = this.xinte_goods.manufacturer
				this.dis = true
				this.type = 2
			}
			
		},
		methods: {
			async loadData() {
				let data = {
					'xinte_goods_id':this.xinte_goods_id,
					'type': this.type,
					'drug_name': this.drug_name,
					'drug_num': this.drug_num,
					'user_name': this.user_name,
					'phone': this.phone,
					'area': this.area,
					'factory': this.factory,
					'number': this.number,
					'specs': this.specs,
					'remarks': this.remarks,
					'package_image': this.package_image[0],
					'is_factory': this.radioNum,
					'prescription_image': this.prescription_image[0],
				}
				console.log(data, '888888888888888888');
				// 表单验证
				let errorMsg = '';

				if (!data.drug_name) errorMsg = '请输入药品名称';
				else if (!data.drug_num) errorMsg = '请输入药品数量';
				else if (!data.user_name) errorMsg = '请输入用户名';
				else if (!data.phone) errorMsg = '请输入手机号';
				else if (!/^1[3-9]\d{9}$/.test(data.phone)) errorMsg = '请输入正确的手机号';
				else if (!data.area) errorMsg = '请输入所在地区';
				else if (!data.factory) errorMsg = '请输入生产厂家';
				else if (!data.number) errorMsg = '请输入商品编码';
				else if (!data.specs) errorMsg = '请输入规格';
				else if (!data.package_image) errorMsg = '请上传药盒图片';
				else if (!data.prescription_image) errorMsg = '请上传处方图片';

				// 如果有错误信息，弹出提示并返回
				if (errorMsg) {
					uni.showToast({
						title: errorMsg,
						icon: 'none'
					});
					return;
				}
				await uni.request({
					url: '/wanlshop/product/xinForm',
					data: data,
					method: 'POST',
					success: res => {
						uni.showToast({
							duration: 1000,
							icon: 'success',
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/new/reserveList/reserveList?type=${this.type}`
							});
						}, 1000);
					}
				});

			},
			// 选择器
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			// 单选
			radioTab(num) {
				this.radioNum = num
			},
			checkboxTab(index) {
				this.checkbox[index].state = !this.checkbox[index].state
			},
			// 上传图片
			uploadImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.$commonNetwork.onUploadFile(res.tempFilePaths[0], (res) => {
							this.package_image.push(res.url);
						});
					}
				})
			},
			uploadImgs() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.$commonNetwork.onUploadFile(res.tempFilePaths[0], (res) => {
							this.prescription_image.push(res.url);
						});
					}
				})
			},
			
			
			/**
			 * 上传图片
			 */
			onUploadImage(index, list) {
				this.$commonNetwork.onUploadFile(list[index], (res) => {
					this.imageList.push(res.url);
					
					if (index < list.length - 1) {
						this.onUploadImage(index + 1, list);
					} else {
						let array = this.$filters.getImageArray(this.value);
						array = array.concat(this.imageList);
						this.$emit("input", array.join(","));
						this.imageList = [];
					}
				});
			},
			
			// 删除图片
			closeImg(e) {
				this.package_image.splice(e, 1)
			},
			closeImgs(e) {
				this.prescription_image.splice(e, 1)
			},
			// 上传视频
			uploadVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePath));
						this.video = res.tempFilePath
					}
				});
			},
			// 删除视频
			closeVideo() {
				this.video = ''
			},
			// 选择年月日
			bindDateChange(e) {
				console.log(e.detail.value)
				this.date = e.detail.value
			},
			bindStartTimeChange(e) {
				this.startTime = e.detail.value
			},
			bindEndTimeChange(e) {
				this.endTime = e.detail.value
			},
			// 地图选点
			selectMapAddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.address = res.address
					}
				});
			},
			purchaseList() {
				uni.navigateTo({
					url: `/pages/new/reserveList/reserveList?type=${this.type}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;

		.type-text {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			view {
				font-size: 30rpx;
				color: #333333;
			}


			input {
				font-size: 30rpx;
				text-align: right;
			}
		}

		.type-select {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.picker {
				display: flex;
				align-items: center;

				.select-con {
					font-size: 30rpx;
				}

				.icon-next {
					font-size: 26rpx;
					color: #999999;
					margin-left: 6rpx;
				}
			}
		}

		.type-textarea {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 30rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.textarea-con {
				width: 630rpx;
				border-radius: 20rpx;
				background-color: #FAFAFA;
				padding: 30rpx 0;

				textarea {
					width: 570rpx;
					height: 200rpx;
					margin-left: 30rpx;
					font-size: 30rpx;
				}
			}
		}

		.type-radio {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.radio-con {
				display: flex;
				align-items: center;

				.radio-box {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					.icon-mo {
						color: #999999;
						font-size: 34rpx;
					}

					.icon-select {
						color: #84BD00;
						font-size: 34rpx;
					}

					.con-text {
						font-size: 30rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.type-checkbox {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.checkbox-con {
				width: 630rpx;
				display: flex;
				flex-wrap: wrap;

				.checkbox-box {
					width: 210rpx;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.icon-mo {
						color: #999999;
						font-size: 34rpx;
					}

					.icon-select {
						color: #84BD00;
						font-size: 34rpx;
					}

					.con-text {
						font-size: 30rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.type-image {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.img-con {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.upload {
					width: 194rpx;
					height: 194rpx;
					border-radius: 20rpx;
					background-color: #FAFAFA;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					view {
						font-size: 58rpx;
						color: #DBDBDB;
					}
				}

				.select-img {
					width: 194rpx;
					height: 194rpx;
					margin-right: 20rpx;
					position: relative;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					.close {
						position: absolute;
						right: -14rpx;
						top: -14rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

				.select-img:nth-child(3) {
					margin-right: 0rpx;
				}

				.select-img:nth-child(6) {
					margin-right: 0rpx;
				}

				.select-img:nth-child(9) {
					margin-right: 0rpx;
				}
			}
		}

		.type-video {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.video-con {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.upload {
					width: 194rpx;
					height: 194rpx;
					border-radius: 20rpx;
					background-color: #FAFAFA;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					view {
						font-size: 58rpx;
						color: #DBDBDB;
					}
				}

				.select-video {
					width: 194rpx;
					height: 194rpx;
					margin-right: 20rpx;
					position: relative;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					video {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					.close {
						position: absolute;
						right: -14rpx;
						top: -14rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

			}
		}
	}

	.mo {
		color: #999999;
	}

	.null {
		width: 750rpx;
		height: 200rpx;
	}

	.sub {
		width: 690rpx;
		height: 82rpx;
		border-radius: 50rpx;
		background-color: #84BD00;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
	}

	.red {
		color: #FF0000;
	}

	.foot-box {
		width: 690rpx;
		height: 82rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;

		.record {
			width: 334rpx;
			height: 82rpx;
			background-color: #fff;
			border: 1px solid #84BD00;
			text-align: center;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #84BD00;
			border-radius: 50rpx;
		}

		.apply {
			width: 334rpx;
			height: 82rpx;
			background: linear-gradient(270deg, #84BD00 0%, #4982EA 100%);
			border: 1px solid #84BD00;
			text-align: center;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>